<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn1">按钮1</button>
    <button class="btn2">按钮2</button>
    <button class="btn3">按钮3</button>
    <script>

        var btn1 = document.querySelector(".btn1")
        var btn2 = document.querySelector(".btn2")
        var btn3 = document.querySelector(".btn3")

        var setCommand = function (ele,command) {
            ele.onclick = function () {
                command.execute()
            }
        }

        var menuBar = {
            refresh: function () {
                console.log("刷新菜单");
            }
        }
        var subMenu = {
            addMenu: function () {
                console.log("增加菜单");
            },
            delMenu: function () {
                console.log("删除菜单");
            },
        }

        var RefreshMenuReceiver = function (receiver) {
            this.receiver = receiver
        }
        RefreshMenuReceiver.prototype.execute = function () {
            this.receiver.refresh()
        }
        var AddMenuReceiver = function (receiver) {
            this.receiver = receiver
        }
        AddMenuReceiver.prototype.execute = function () {
            this.receiver.addMenu()
        }
        var DelMenuReceiver = function (receiver) {
            this.receiver = receiver
        }
        DelMenuReceiver.prototype.execute = function () {
            this.receiver.delMenu()
        }

        var refresh = new RefreshMenuReceiver(menuBar)
        var add = new AddMenuReceiver(subMenu)
        var del = new DelMenuReceiver(subMenu)

        setCommand(btn1,refresh)
        setCommand(btn2,add)
        setCommand(btn3,del)
    </script>
</body>
</html>